<template>
	<div>
		<el-select v-model="value" filterable clearable multiple @change="onChange" style="width:100%">
			<el-option key="all" label="课程名称" value="all" disabled>
				<span style="float: left"><strong><em>功能选项</em> </strong> </span>
				<span style="
          float: right;
          color: var(--el-text-color-secondary);
          font-size: 13px;
        ">
					<strong><em>是否必填</em> </strong>

				</span>
			</el-option>

			<el-option v-for="(item, index) in list" :key="index" :value="item" :label="item.label">
				<span style="float: left">{{ item.label }}</span>
				<span style="
          float: right;
          color: var(--el-text-color-secondary);
          font-size: 13px;
					margin-right: 50px;
        ">

					<el-switch v-model="item.required" class="mt-2" style="margin-left: 24px" inline-prompt active-text="是"
						inactive-text="否" @click.stop="onChange1" />
				</span>
			</el-option>

		</el-select>
	</div>
</template>

<script lang="ts">
import { defineComponent, inject, onMounted, ref, watch } from "vue";
import { isArray } from "/@/core/utils";


export default defineComponent({
	name: "courseFunctionSelect",

	props: {
		modelValue: [Number, String, Array]
		// props: Object
	},

	emits: ["update:modelValue"],

	setup(props, { emit }) {
		// 请求服务
		const service = inject<any>("service");

		// 数据列表
		const list = ref<any[]>([
			{ label: "编程难度", value: "programming_level", required: false },
			{ label: "搭建难度", value: "construct_level", required: false },
			{ label: "科学目标", value: "science_goals", required: false },
			{ label: "编程目标", value: "programming_goals", required: false },
			{ label: "工程设计目标", value: "engineering_design_goals", required: false },
			{ label: "内容标签", value: "content_label", required: false },
			{ label: "机械原理标签", value: "mechanical", required: false },
			{ label: "程序设计标签", value: "program_design", required: false },
			{ label: "课程造型标签", value: "course_shape", required: false },
			{ label: "幼儿五大主题", value: "child_five_theme", required: false },
			{ label: "情感目标", value: "emotional_goal", required: false },
			{ label: "文件下载", value: "file", required: false },
		]);

		// 绑定值
		const value = ref<any>([]);

		// 绑定值回调
		function onChange(val: any) {

			console.log(val, "--------");

			emit("update:modelValue", val);

			console.log(list.value, "++++++++");
		}

		// 解析值
		watch(
			() => props.modelValue,
			(val: any) => {
				console.log(val, "1111111111111");

				value.value = (isArray(val) ? val : [])
				for (let index = 0; index < value.value.length; index++) {
					const element = value.value[index];
					for (let index1 = 0; index1 < list.value.length; index1++) {
						const element1 = list.value[index1];
						if (element.value === element1.value) {
							console.log(element.required, 1111);
							console.log(element1.required, 2222);
							element1.required = element.required
						}
					}

				}
			},
			{
				immediate: true
			}
		);

		onMounted(async () => {
			// console.log(service);

			// // list.value = await service.courseTypeService.list();
			// list.value = await ref([
			// 	{ label: "编程难度", value: "programming_level", required: false },
			// 	{ label: "搭建难度", value: "construct_level", required: false },
			// 	{ label: "科学目标", value: "science_goals", required: false },
			// 	{ label: "编程目标", value: "programming_goals", required: false },
			// 	{ label: "工程设计目标", value: "engineering_design_goals", required: false },
			// 	{ label: "内容标签", value: "content_label", required: false },
			// 	{ label: "机械原理标签", value: "mechanical", required: false },
			// 	{ label: "程序设计标签", value: "program_design", required: false },
			// 	{ label: "课程造型标签", value: "course_shape", required: false },
			// 	{ label: "幼儿五大主题", value: "child_five_theme", required: false },
			// ])

			// console.log(list.value, "111111111111");

		});
		const onChange1 = function (val) {
			for (let index = 0; index < value.value.length; index++) {
				const element = value.value[index];
				for (let index1 = 0; index1 < list.value.length; index1++) {
					const element1 = list.value[index1];
					if (element.value === element1.value) {
						console.log(element.required, 1111);
						console.log(element1.required, 2222);
						element.required = element1.required
					}
				}

			}
			console.log(value.value);


		}


		return {
			list,
			value,
			onChange,
			onChange1,
		};
	}
});
</script>
